<template>
  <div class="flex flex-col h-full">
    <!-- Chat Message Area -->
    <div 
      class="flex-1 overflow-y-auto p-4 bg-gray-50 min-h-[100px]" 
      ref="messageContainer"
      :style="{ height: `calc(${messageAreaHeight}% - 6px)` }"
    >
      <!-- Export Button -->
      <div v-if="messages.length > 0" class="flex justify-end mb-2">
        <button 
          @click="exportChatHistory" 
          class="text-xs flex items-center text-gray-600 hover:text-indigo-600 transition-colors"
        >
          <i class="fas fa-download mr-1"></i> 导出聊天记录
        </button>
      </div>
      
      <!-- WebSocket Connection Error -->
      <div v-if="!loading && websocketService && websocketService.getStatus() === 'failed'" class="flex flex-col justify-center items-center h-full text-red-500">
        <i class="fas fa-exclamation-circle fa-3x mb-3"></i>
        <p>WebSocket连接失败</p>
        <button @click="websocketService.connect()" class="mt-3 px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">
          重新连接
        </button>
      </div>
      
      <!-- Loading State -->
      <div v-else-if="loading" class="flex justify-center items-center h-full">
        <div class="text-indigo-600">
          <i class="fas fa-circle-notch fa-spin fa-2x"></i>
          <p class="mt-2 text-sm text-gray-600">加载对话中...</p>
        </div>
      </div>
      
      <!-- No Messages State -->
      <div v-else-if="messages.length === 0" class="flex flex-col justify-center items-center h-full text-gray-500">
        <i class="fas fa-comments fa-3x mb-3"></i>
        <p>没有消息记录</p>
        <p class="mt-2 text-sm">开始新的对话吧！</p>
      </div>

      <!-- Messages List -->
      <div v-else class="relative">
        <!-- Topic Indicator -->
        <div v-if="messageTopics.length > 0" class="mb-4">
          <div class="flex flex-wrap gap-2">
            <div 
              v-for="(topic, index) in messageTopics" 
              :key="index"
              class="bg-gray-100 rounded-full px-3 py-1 text-xs flex items-center"
              :class="{'bg-indigo-100 text-indigo-800': currentTopic === topic.id}"
            >
              <span class="mr-1">{{topic.name}}</span>
              <span class="text-xs text-gray-500">({{topic.count}})</span>
              <button 
                v-if="currentTopic === topic.id" 
                @click="currentTopic = null"
                class="ml-1 text-gray-500 hover:text-gray-700"
              >
                <i class="fas fa-times-circle"></i>
              </button>
              <button 
                v-else
                @click="currentTopic = topic.id"
                class="ml-1 text-gray-500 hover:text-gray-700"
              >
                <i class="fas fa-filter"></i>
              </button>
            </div>
          </div>
        </div>

        <div v-for="(message, index) in filteredMessages" :key="message.id" class="mb-6">
          <!-- AI/System Message -->
          <template v-if="message.type === 'system'">
            <div class="flex items-start mb-2">
              <div class="w-10 h-10 rounded-md bg-blue-100 flex items-center justify-center mr-3 flex-shrink-0">
                <i class="fas fa-robot text-blue-500"></i>
              </div>
              <div class="bg-white rounded-lg p-3 shadow-sm max-w-3xl relative group">
                <!-- Message Actions -->
                <div class="absolute right-2 top-2 hidden group-hover:flex">
                  <button 
                    @click="bookmarkMessage(message.id)" 
                    class="text-gray-400 hover:text-yellow-500 mr-2"
                    :class="{'text-yellow-500': message.bookmarked}"
                  >
                    <i class="fas" :class="message.bookmarked ? 'fa-bookmark' : 'fa-bookmark'"></i>
                  </button>
                  <button @click="showTopicDialog(message)" class="text-gray-400 hover:text-indigo-500">
                    <i class="fas fa-tag"></i>
                  </button>
                </div>
                
                <div class="flex items-center mb-1">
                  <h3 class="text-base font-medium text-gray-900">{{ message.sender }}</h3>
                  <button v-if="message.collapsible" class="ml-auto text-gray-500 text-sm" @click="toggleMessageCollapse(message.id)">
                    {{ message.collapsed ? '展开 ∨' : '收起 ^' }}
                  </button>
                </div>
                <div v-if="!message.collapsed" class="text-sm text-gray-700 space-y-2">
                  <template v-if="Array.isArray(message.content)">
                    <p v-for="(item, itemIndex) in message.content" :key="itemIndex" 
                       :class="{ 'flex items-start': item.icon, 'mt-3': item.type === 'text' }">
                      <span v-if="item.icon" :class="getIconClass(item.icon)" class="mr-2">{{ item.icon }}</span>
                      <span>{{ item.text }}</span>
                    </p>
                  </template>
                  <p v-else>{{ message.content }}</p>
                </div>
                
                <!-- Topic Badge -->
                <div v-if="message.topic" class="mt-2 inline-block bg-indigo-50 text-indigo-700 rounded-full px-2 py-0.5 text-xs">
                  <i class="fas fa-tag mr-1"></i>{{ getTopicName(message.topic) }}
                </div>
              </div>
            </div>

            <div v-if="message.meta" class="flex items-center mb-3 text-xs text-gray-500 pl-14">
              <span class="mr-2">👉 {{ message.meta }}</span>
              <span class="ml-auto">{{ message.formattedTime || formatTime(message.time) }}</span>
            </div>
          </template>

          <!-- User Message -->
          <template v-else-if="message.type === 'user'">
            <div class="flex justify-end mb-1">
              <div class="mr-3 flex flex-col items-end relative group">
                <!-- Message Actions -->
                <div class="absolute left-2 top-0 hidden group-hover:flex">
                  <button 
                    @click="bookmarkMessage(message.id)" 
                    class="text-gray-400 hover:text-yellow-500 mr-2"
                    :class="{'text-yellow-500': message.bookmarked}"
                  >
                    <i class="fas" :class="message.bookmarked ? 'fa-bookmark' : 'fa-bookmark'"></i>
                  </button>
                  <button @click="showTopicDialog(message)" class="text-gray-400 hover:text-indigo-500">
                    <i class="fas fa-tag"></i>
                  </button>
                </div>
                
                <div class="bg-indigo-600 text-white rounded-lg p-3 max-w-xl">
                  <p class="text-sm">{{ message.content }}</p>
                  
                  <!-- Topic Badge -->
                  <div v-if="message.topic" class="mt-2 inline-block bg-indigo-300 bg-opacity-30 text-white rounded-full px-2 py-0.5 text-xs">
                    <i class="fas fa-tag mr-1"></i>{{ getTopicName(message.topic) }}
                  </div>
                </div>
                <span class="text-xs text-gray-500 mt-1">{{ message.formattedTime || formatTime(message.time) }}</span>
              </div>
              <div class="w-10 h-10 rounded-full overflow-hidden flex-shrink-0">
                <img :src="getUserAvatar(message.sender)" alt="User" class="w-full h-full object-cover">
              </div>
            </div>
          </template>
        </div>
      </div>

      <!-- Processing Status Indicator -->
      <div v-if="processingStatus" class="flex items-start mb-2">
        <div class="w-10 h-10 rounded-md bg-blue-100 flex items-center justify-center mr-3 flex-shrink-0">
          <i class="fas fa-cog text-blue-500" :class="{ 'fa-spin': processingStatus.status !== 'completed' }"></i>
        </div>
        <div class="bg-white rounded-lg p-3 shadow-sm">
          <div class="flex flex-col">
            <div class="flex items-center">
              <span class="text-sm font-medium text-gray-700">{{ processingStatus.statusText }}</span>
              <div class="ml-2 flex items-center">
                <template v-if="processingStatus.status === 'received'">
                  <i class="fas fa-check-circle text-green-500"></i>
                </template>
                <template v-else-if="processingStatus.status === 'completed'">
                  <i class="fas fa-check-double text-green-500"></i>
                </template>
                <template v-else>
                  <div class="processing-indicator-dot"></div>
                  <div class="processing-indicator-dot animation-delay-200"></div>
                  <div class="processing-indicator-dot animation-delay-400"></div>
                </template>
              </div>
            </div>
            <div class="flex mt-2 text-xs text-gray-500">
              <div class="space-x-2 flex">
                <span :class="{ 'text-blue-500 font-medium': processingStatus.status === 'received' || processingStatus.status === 'completed' }">收到</span>
                <i class="fas fa-chevron-right text-xs"></i>
                <span :class="{ 'text-blue-500 font-medium': processingStatus.status === 'analyzing' || processingStatus.status === 'completed' }">分析</span>
                <i class="fas fa-chevron-right text-xs"></i>
                <span :class="{ 'text-blue-500 font-medium': processingStatus.status === 'planning' || processingStatus.status === 'completed' }">规划</span>
                <i class="fas fa-chevron-right text-xs"></i>
                <span :class="{ 'text-blue-500 font-medium': processingStatus.status === 'executing' || processingStatus.status === 'completed' }">执行</span>
                <i class="fas fa-chevron-right text-xs"></i>
                <span :class="{ 'text-blue-500 font-medium': processingStatus.status === 'responding' || processingStatus.status === 'completed' }">回复</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Loading Indicator -->
      <div v-if="isTyping" class="flex items-start mb-2">
        <div class="w-10 h-10 rounded-md bg-blue-100 flex items-center justify-center mr-3 flex-shrink-0">
          <i class="fas fa-robot text-blue-500"></i>
        </div>
        <div class="bg-white rounded-lg p-3 shadow-sm">
          <div class="flex flex-col">
            <h3 class="text-xs font-medium text-gray-700 mb-1">{{ currentAiSender }} 正在输入...</h3>
            <div class="flex space-x-1">
              <div class="typing-dot"></div>
              <div class="typing-dot animation-delay-200"></div>
              <div class="typing-dot animation-delay-400"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Resizable Divider -->
    <div 
      class="resize-divider cursor-ns-resize flex items-center justify-center h-1 select-none" 
      @mousedown="startResize"
    >
      <div class="w-10 h-1 rounded-full"></div>
    </div>

    <!-- Message Input Area - Using the ChatMessageInput component -->
    <div :style="{ height: `calc(${100 - messageAreaHeight}% - 6px)` }" class="min-h-[120px]">
      <ChatMessageInput 
        :is-typing="isTyping" 
        :chat-id="chatId"
        @send-message="handleSendMessage"
        ref="messageInputComponent"
        class="h-full"
      />
    </div>

    <!-- Topic Dialog -->
    <div v-if="showTopicModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div class="bg-white rounded-lg p-4 w-80">
        <h3 class="text-lg font-medium mb-3">为消息添加主题标签</h3>
        <div class="mb-3">
          <input 
            v-model="topicInput" 
            type="text" 
            placeholder="输入新主题名称" 
            class="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-indigo-500"
          >
        </div>
        <div class="mb-3 max-h-40 overflow-y-auto">
          <div 
            v-for="topic in availableTopics" 
            :key="topic.id" 
            @click="selectTopic(topic.id)"
            class="p-2 hover:bg-gray-100 rounded cursor-pointer flex items-center"
            :class="{'bg-indigo-50': selectedTopic === topic.id}"
          >
            <i class="fas fa-tag text-indigo-500 mr-2"></i>
            <span>{{ topic.name }}</span>
          </div>
        </div>
        <div class="flex justify-end">
          <button 
            @click="closeTopicDialog()" 
            class="px-3 py-1 text-gray-600 hover:text-gray-800 mr-2"
          >
            取消
          </button>
          <button 
            @click="applyTopic()" 
            class="px-3 py-1 bg-indigo-600 text-white rounded hover:bg-indigo-700"
          >
            确定
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, computed, watch, onBeforeUnmount } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import ChatMessageInput from '@/components/ChatMessageInput.vue';
import websocketService from '@/services/websocket';
import { wsEvents } from '@config/websocket';
import { formatTime } from '@/mock/chatMessages';

export default {
  name: 'ChatEditor',
  components: {
    ChatMessageInput
  },
  setup() {
    const route = useRoute();
    const router = useRouter();
    
    // Current chat ID from route
    const chatId = computed(() => route.params.id);
    
    return {
      route,
      router,
      chatId,
      websocketService
    };
  },
  data() {
    return {
      loading: true,
      isTyping: false,
      avatars: {
        lkun233: 'https://picsum.photos/id/1012/100/100',
        default: 'https://picsum.photos/id/1005/100/100'
      },
      currentUser: 'lkun233',
      messages: [],
      currentAiSender: null,
      // 处理状态
      processingStatus: null,
      // Resizing variables
      messageAreaHeight: 70, // Default height ratio (70%)
      isResizing: false,
      lastMouseY: 0,
      totalHeight: 0,
      // WebSocket event unsubscribers
      wsUnsubscribers: [],
      // Topic management
      showTopicModal: false,
      currentMessageId: null,
      topicInput: '',
      selectedTopic: null,
      topics: [],
      currentTopic: null
    };
  },
  watch: {
    chatId: {
      immediate: true,
      handler(newChatId, oldChatId) {
        if (newChatId !== oldChatId) {
          this.loadChatMessages(newChatId);
        }
      }
    }
  },
  computed: {
    // 获取可用主题列表
    availableTopics() {
      // 合并现有主题和新输入的主题
      const existingTopics = [...this.topics];
      
      // 如果输入了新主题，且不存在于现有主题中
      if (this.topicInput.trim() && !existingTopics.some(t => t.name.toLowerCase() === this.topicInput.toLowerCase())) {
        existingTopics.push({
          id: `new-${Date.now()}`,
          name: this.topicInput.trim(),
          isNew: true
        });
      }
      
      return existingTopics;
    },
    
    // 获取消息的主题分组
    messageTopics() {
      const topicCounts = {};
      
      // 计算每个主题下的消息数量
      this.messages.forEach(message => {
        if (message.topic) {
          if (!topicCounts[message.topic]) {
            const topic = this.topics.find(t => t.id === message.topic);
            topicCounts[message.topic] = {
              id: message.topic,
              name: topic ? topic.name : '未命名主题',
              count: 0
            };
          }
          topicCounts[message.topic].count++;
        }
      });
      
      return Object.values(topicCounts);
    },
    
    // 根据当前选中的主题筛选消息
    filteredMessages() {
      if (!this.currentTopic) {
        return this.messages;
      }
      
      return this.messages.filter(message => message.topic === this.currentTopic);
    }
  },
  methods: {
    // Resize handlers
    startResize(event) {
      this.isResizing = true;
      this.lastMouseY = event.clientY;
      this.totalHeight = this.$el.clientHeight;
      
      document.addEventListener('mousemove', this.handleResize);
      document.addEventListener('mouseup', this.stopResize);
      
      // Prevent text selection during resize
      document.body.style.userSelect = 'none';
    },
    
    handleResize(event) {
      if (!this.isResizing) return;
      
      const deltaY = this.lastMouseY - event.clientY;
      
      // Corrected logic: Dragging down (positive deltaY) should decrease the top section height
      // Dragging up (negative deltaY) should increase the top section height
      const newMessageAreaHeight = this.messageAreaHeight - (deltaY / this.totalHeight * 100);
      
      // Constrain the height values to reasonable ranges
      if (newMessageAreaHeight >= 20 && newMessageAreaHeight <= 90) {
        this.messageAreaHeight = newMessageAreaHeight;
        this.lastMouseY = event.clientY;
      }
    },
    
    stopResize() {
      this.isResizing = false;
      document.removeEventListener('mousemove', this.handleResize);
      document.removeEventListener('mouseup', this.stopResize);
      
      // Restore text selection
      document.body.style.userSelect = '';
      
      // Force a scroll to bottom in case the message area was resized
      this.scrollToBottom();
    },
    
    loadChatMessages(chatId) {
      // Show loading state
      this.loading = true;
      this.messages = [];
      this.processingStatus = null;
      
      // 首先确保WebSocket已连接
      if (!websocketService.isConnected()) {
        websocketService.connect();
      }
      
      // 加入聊天
      websocketService.send('join_chat', { chatId });
    },
    
    // 处理聊天历史
    handleChatHistory({ chatId, messages }) {
      if (chatId !== this.chatId) return;
      
      // 格式化消息时间
      this.messages = messages.map(message => ({
        ...message,
        formattedTime: formatTime(message.time)
      }));
      
      this.loading = false;
      this.scrollToBottom();
      
      // 提取当前AI发送者
      const aiMessages = this.messages.filter(msg => msg.type === 'system');
      if (aiMessages.length > 0) {
        this.currentAiSender = aiMessages[aiMessages.length - 1].sender;
      }
    },
    
    // 处理新消息
    handleNewMessage({ chatId, message }) {
      if (chatId !== this.chatId) return;
      
      // 格式化消息时间并添加
      const formattedMessage = {
        ...message,
        formattedTime: formatTime(message.time)
      };
      
      this.messages.push(formattedMessage);
      
      // 如果是AI消息，更新当前AI发送者并清除处理状态
      if (message.type === 'system') {
        this.currentAiSender = message.sender;
      }
      
      this.$nextTick(() => {
        this.scrollToBottom();
      });
    },
    
    // 处理输入状态
    handleTypingStatus({ chatId, sender }) {
      if (chatId !== this.chatId) return;
      
      this.isTyping = true;
      this.currentAiSender = sender;
      this.scrollToBottom();
    },
    
    // 处理停止输入
    handleTypingEnd({ chatId }) {
      if (chatId !== this.chatId) return;
      
      this.isTyping = false;
    },
    
    // 处理消息状态更新
    handleMessageStatus({ chatId, messageId, status, statusText }) {
      if (chatId !== this.chatId) return;
      
      // 更新处理状态
      this.processingStatus = { status, statusText };
      
      // 如果状态是完成，则在一段时间后清除状态显示
      if (status === 'completed') {
        setTimeout(() => {
          if (this.processingStatus && this.processingStatus.status === 'completed') {
            this.processingStatus = null;
          }
        }, 2000);
      }
      
      this.scrollToBottom();
    },
    
    // 处理发送消息
    handleSendMessage(data) {
      const { content, chatId, isSystemHelp } = data;
      
      // 如果是系统帮助消息，就不发送到服务器
      if (isSystemHelp) {
        // 创建一个系统帮助消息
        const helpMessage = {
          id: this.generateMessageId(),
          type: 'system',
          sender: 'ChatAssistant',
          content: content,
          time: new Date().toISOString(),
          formattedTime: formatTime(new Date().toISOString()),
          isHelp: true
        };
        
        // 添加到本地消息列表
        this.messages.push(helpMessage);
        this.scrollToBottom();
        return;
      }
      
      // 创建用户消息
      const userMessage = {
        id: this.generateMessageId(),
        type: 'user',
        sender: this.currentUser,
        content: content,
        time: new Date().toISOString(),
        formattedTime: formatTime(new Date().toISOString())
      };
      
      // 添加到本地消息列表
      this.messages.push(userMessage);
      this.scrollToBottom();
      
      // 通过WebSocket发送消息
      websocketService.send('send_message', {
        chatId: this.chatId,
        message: userMessage
      });
    },
    
    scrollToBottom() {
      this.$nextTick(() => {
        const container = this.$refs.messageContainer;
        if (container) {
          container.scrollTop = container.scrollHeight;
        }
      });
    },
    
    getUserAvatar(username) {
      return this.avatars[username] || this.avatars.default;
    },
    
    getIconClass(icon) {
      if (icon === '☀' || icon === '📍') return 'text-yellow-500';
      if (icon === '📌') return 'text-red-500';
      return 'text-gray-500';
    },
    
    toggleMessageCollapse(messageId) {
      const message = this.messages.find(m => m.id === messageId);
      if (message && message.collapsible) {
        message.collapsed = !message.collapsed;
      }
    },
    
    // 生成消息ID
    generateMessageId() {
      return Date.now().toString() + Math.floor(Math.random() * 1000).toString();
    },
    
    // 设置WebSocket事件监听
    setupWebSocketListeners() {
      // 清除之前的监听器
      this.removeWebSocketListeners();
      
      // 添加WebSocket事件监听
      this.wsUnsubscribers = [
        websocketService.on(wsEvents.CHAT_HISTORY, this.handleChatHistory),
        websocketService.on(wsEvents.NEW_MESSAGE, this.handleNewMessage),
        websocketService.on(wsEvents.TYPING_START, this.handleTypingStatus),
        websocketService.on(wsEvents.TYPING_END, this.handleTypingEnd),
        // 添加新的消息处理状态事件
        websocketService.on(wsEvents.MESSAGE_RECEIVED, this.handleMessageStatus),
        websocketService.on(wsEvents.MESSAGE_ANALYZING, this.handleMessageStatus),
        websocketService.on(wsEvents.MESSAGE_PLANNING, this.handleMessageStatus),
        websocketService.on(wsEvents.MESSAGE_EXECUTING, this.handleMessageStatus),
        websocketService.on(wsEvents.MESSAGE_RESPONDING, this.handleMessageStatus),
        websocketService.on(wsEvents.MESSAGE_COMPLETED, this.handleMessageStatus)
      ];
    },
    
    // 移除WebSocket事件监听
    removeWebSocketListeners() {
      if (this.wsUnsubscribers.length > 0) {
        this.wsUnsubscribers.forEach(unsubscribe => unsubscribe());
        this.wsUnsubscribers = [];
      }
    },
    
    // 导出聊天记录
    exportChatHistory() {
      // 准备导出数据
      const exportData = {
        chatId: this.chatId,
        exportTime: new Date().toISOString(),
        messages: this.messages.map(msg => ({
          sender: msg.sender,
          content: msg.content,
          time: msg.time,
          type: msg.type
        }))
      };
      
      // 转换为JSON字符串
      const jsonStr = JSON.stringify(exportData, null, 2);
      const blob = new Blob([jsonStr], { type: 'application/json' });
      
      // 创建下载链接
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `chat-history-${this.chatId}-${new Date().toISOString().slice(0, 10)}.json`;
      document.body.appendChild(a);
      a.click();
      
      // 清理
      URL.revokeObjectURL(url);
      document.body.removeChild(a);
      
      // 显示成功消息
      this.$message?.success?.('聊天记录已导出') || alert('聊天记录已导出');
    },
    
    // 获取主题名称
    getTopicName(topicId) {
      const topic = this.topics.find(t => t.id === topicId);
      return topic ? topic.name : '未命名主题';
    },
    
    // 显示主题对话框
    showTopicDialog(message) {
      this.currentMessageId = message.id;
      this.selectedTopic = message.topic || null;
      this.topicInput = '';
      this.showTopicModal = true;
    },
    
    // 关闭主题对话框
    closeTopicDialog() {
      this.showTopicModal = false;
      this.currentMessageId = null;
      this.selectedTopic = null;
      this.topicInput = '';
    },
    
    // 选择主题
    selectTopic(topicId) {
      this.selectedTopic = topicId;
    },
    
    // 应用主题
    applyTopic() {
      if (!this.currentMessageId) {
        this.closeTopicDialog();
        return;
      }
      
      let topicId = this.selectedTopic;
      
      // 如果是新主题
      if (this.topicInput.trim() && (!topicId || topicId.startsWith('new-'))) {
        // 创建新主题
        topicId = `topic-${Date.now()}`;
        this.topics.push({
          id: topicId,
          name: this.topicInput.trim()
        });
      }
      
      // 应用到消息
      const message = this.messages.find(m => m.id === this.currentMessageId);
      if (message) {
        message.topic = topicId;
      }
      
      // 关闭对话框
      this.closeTopicDialog();
    },
    
    // 收藏/取消收藏消息
    bookmarkMessage(messageId) {
      const message = this.messages.find(m => m.id === messageId);
      if (message) {
        message.bookmarked = !message.bookmarked;
      }
    }
  },
  mounted() {
    // 连接WebSocket
    websocketService.connect();
    
    // 设置WebSocket事件监听
    this.setupWebSocketListeners();
    
    // 加载聊天消息
    if (this.chatId) {
      this.loadChatMessages(this.chatId);
    }
    
    // Get initial container height
    this.totalHeight = this.$el.clientHeight;
    
    // Listen for window resize to update total height
    window.addEventListener('resize', () => {
      this.totalHeight = this.$el.clientHeight;
    });
  },
  beforeUnmount() {
    // Clean up WebSocket event listeners
    this.removeWebSocketListeners();
    
    // Clean up event listeners
    document.removeEventListener('mousemove', this.handleResize);
    document.removeEventListener('mouseup', this.stopResize);
    window.removeEventListener('resize', () => {});
  }
};
</script>

<style scoped>
/* Custom styling for the component */
.overflow-y-auto::-webkit-scrollbar {
  width: 6px;
}

.overflow-y-auto::-webkit-scrollbar-track {
  background: transparent;
}

.overflow-y-auto::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

.resize-divider {
  transition: background-color 0.2s;
}

.resize-divider:hover {
  background-color: #e5e7eb;
}

.typing-dot,
.processing-indicator-dot {
  width: 8px;
  height: 8px;
  background-color: #6366F1;
  border-radius: 50%;
  animation: typing-animation 1.4s infinite both;
  margin-right: 2px;
}

.processing-indicator-dot {
  width: 4px;
  height: 4px;
  background-color: #4f46e5;
}

.animation-delay-200 {
  animation-delay: 0.2s;
}

.animation-delay-400 {
  animation-delay: 0.4s;
}

@keyframes typing-animation {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}
</style>
